<comment>
  ## 图片上传组件 解决elementui上传之后的表单校验问题
  只适用于单图上传与回显
</comment>
<template>
    <div class="single-upload" >
        <el-upload
            v-if="isChange"
            v-loading="isUploaded"
            accept="image/jpeg,image/gif,image/png"
            :show-file-list="false"
            :action="CMBASE.baseUploadAction"
            list-type="picture-card"
            :on-change="handleChange"
            :on-remove="handleRemove"
            :on-success="handleUpload"
            :before-upload="beforeUpload"
            :limit="limit"
            :on-error="handleError"
            :multiple="multiple"
        >
            <div v-if="value" class="divImg" >

                <img v-if="value" width="100%" :src=" (  value.indexOf('http')>-1 ||value.indexOf('https://')>-1  ) ? value : CMBASE.baseFileContext+value"
                    alt="" class="upload-img"  style="width: 100px; height: 100px; object-fit: contain;">

                <div class="delete-img"   >
                    <i class="el-icon-view" @click.stop="showImg()"></i>
                    <i class="el-icon-delete" @click.stop="deleteImg()"></i>
                </div>
            </div>

            <i v-else class="el-icon-plus" />

            <!-- <i slot="default" class="el-icon-edit">  </i> -->
            <!-- <div slot="file" slot-scope="{file}">
                <img v-if="value"  class="el-upload-list__item-thumbnail"
                    :src=" value.indexOf('http')>-1 ? value : CMBASE.baseFileContext+value"  alt="" >
                <span class="el-upload-list__item-actions">
                    <span  class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                        <i class="el-icon-zoom-in"></i>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)" >
                        <i class="el-icon-download"></i>
                    </span>
                    <span  v-if="!disabled"  class="el-upload-list__item-delete" @click="handleRemove(file)" >
                        <i class="el-icon-delete"></i>
                    </span>
                </span>
            </div>  -->

        </el-upload>

        <el-dialog :visible.sync="dialogVisible" top="5vh" append-to-body>
            <div style="text-align:center;display:flex" >
                <img style="width:100%" :src="dialogImageUrl" alt="">
            </div>
        </el-dialog>

    </div>
</template>
<script>
import CryptoJS from '@/utils/crypto'
export default {
    props: {
        width:{
            type:String ,
        },

        height:{
            type:String
        },


        path: {
            type: String
        },
        value: {
            type: String
        },
        limit: {
            type: Number,
            default: 1
        },
        multiple: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            isChange: true,
            isUploaded: false,
            dialogImageUrl: '',
            dialogVisible: false
        }
    },
    methods: {

    showImg() {
      this.dialogImageUrl = (this.value.indexOf('http')>-1 ||this.value.indexOf('https://')>-1) ? this.value : CMBASE.baseFileContext + this.value;

      this.dialogVisible = true;
    },

        deleteImg(){
            this.$emit('input', '')
            //  将触发类型改为change
            this.dispatch('ElFormItem', 'el.form.change', [])
        },

        beforeUpload(file) {
            // 文件大小校验
            const judeSize = file.size / 1024 < this.CMBASE.baseUploadSize
            if (!judeSize) {
                this.$message({
                    message: `上传文件大小不能超过 ${(this.CMBASE.baseUploadSize / 1024).toFixed()}M!`,
                    type: 'warning'
                })
                return false
            }
            this.isUploaded = true
        },
        // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
        handleChange(file, fileList) {
            this.handleImageList(fileList)
        },
        // 文件列表移除文件时的钩子
        handleRemove(file, fileList) {
            this.handleImageList(fileList)
        },

        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleDownload(file) {
            console.log(file);
        },

        // 文件上传成功时的钩子
        handleUpload(file, fileList) {
            try {
                if (fileList.response.code === 0 ) {
                    this.handleImageList(fileList)
                    this.$message({ message: '上传成功', type: 'success' })
                } else {
                    this.$message({ message: '上传失败', type: 'error' })
                }
            } catch (e) {
                console.log(e)
            }

            this.isUploaded = false
            this.isChange = false
            setTimeout(() => {
                this.isChange = true
            },10)
        },
        // 上传错误时的钩子
        handleError() {
            this.isUploaded = false
            this.$message({ message: '上传失败', type: 'error' })
        },
        // 处理文件列表
        handleImageList(fileList) {
            try {
                const imageList = []
                fileList.length > 0 && fileList.forEach(item => {
                    if (item.response !== undefined) {
                        // 解密
                        item.response.data = JSON.parse(CryptoJS.Decrypt(item.response.data))
                        imageList.push(item.response.data.path)
                    }
                })

                console.log(imageList.join(','));

                //  发送上传之后的文件
                this.$emit('input', imageList.join(','))
                //  将触发类型改为change
                this.dispatch('ElFormItem', 'el.form.change', imageList)
            } catch (e) {
                throw e
            }
        },
        // 解决上传校验问题
        // elementUI mixins - emitter 中拷贝的
        dispatch(componentName, eventName, params) {
            var parent = this.$parent || this.$root
            var name = parent.$options.componentName

            while (parent && (!name || name !== componentName)) {
                parent = parent.$parent
                if (parent) {
                    name = parent.$options.componentName
                }
            }
            if (parent) {
                parent.$emit.apply(parent, [eventName].concat(params))
            }
        }
    }
}
</script>
<style lang="scss" scope >


    .divImg{

        height: 100px;
        display: flex;
        align-items: center;

        .delete-img {
            display: none;
        }


        &:hover{
            .delete-img {
                display: flex;
                position: absolute;
                width: 100px;
                text-align:center;
                justify-content: center;
                align-items: center;
                left: 0px;
                bottom: 0px;
                background: #606266;
                z-index: 999;
                cursor: pointer;
                border-radius: 0px 0px  5px  5px;
                i {
                    margin: 5px  auto;
                    display: block;
                    font-size: 14px;
                    color: white;
                }
            }
        }

    }


    .single-upload{
        .el-upload-list{
            img{
                object-fit: contain;
            }
        }
        .el-upload--picture-card{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            /* img{
                width: 120px;
                height: 120px;
                object-fit: contain;
            } */
        }
    }


    // 上传图片框样式
    .el-upload--picture-card{
        border: 1px dashed #13C3C7;
    }
    .el-upload--picture-card:hover {
        border-color: #13C3C7;
        color: #13C3C7;
    }
    .el-upload--picture-card{
        width: 100px;
        height: 100px;
        font-size: 16px !important;
    }
    .el-upload{
        width: 100px;
        height: 100px;
        line-height: 100px;
        font-size: 16px;
    }
    .el-upload-list--picture-card .el-upload-list__item{
        width: 100px;
        height: 100px;
        line-height: 100px;
        font-size: 16px;
    }

    .el-upload-list--picture-card .el-upload-list__item-actions:hover {
        opacity: 1;
        font-size: 16px;
    }

    .el-upload-list--picture-card .el-upload-list__item-thumbnail{
        width: 100px;
        height: 100px;
        line-height: 100px;
        font-size: 16px;
    }



</style>
